<!DOCTYPE html>
<html lang='en'>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>ConfirmDialog Widget Tests</title>

	<script type="text/javascript" src="boilerplate.js"></script>

	<script type="text/javascript">
		require([
			"dojo/parser",

			// used by parser
			"dijit/ConfirmDialog",
			"dijit/form/Button",
			"dijit/form/TextBox",

			"dojo/domReady!"
		], function(parser){
			parser.parse();
		});
	</script>
</head>
<body class="claro" role="main">

	<h1 class="testTitle">Dijit.ConfirmDialog tests</h1>
	<script type="dojo/require">
		registry: "dijit/registry"
	</script>

	<button id="loginButton" data-dojo-type="dijit/form/Button"
			data-dojo-props='onClick:function(){ registry.byId("loginDlg").show() }'>Show Confirm Dialog</button>

	<div id="loginDlg" data-dojo-type="dijit/ConfirmDialog" title="Login" data-dojo-props='
				execute:function(args){ console.log("submitted w/args: ", args); }'>
		<script type="dojo/method" data-dojo-event="execute">
			var value = this.get("value");
			document.getElementById("formData").value = value.user + "/" + value.password;
			console.log("login as " + value.user + ", " + value.password);
		</script>
		<script type="dojo/method" data-dojo-event="onCancel">
			document.getElementById("formData").value = "";
		</script>
		<table role="presentation">
			<tr>
				<td><label for="user">User:</label></td>
				<td><input id="user" name="user" data-dojo-type=dijit/form/TextBox></td>
			</tr>
			<tr>
				<td><label for="password">Password:</label></td>
				<td><input id="password" name="password" type=password data-dojo-type=dijit/form/TextBox></td>
			</tr>
		</table>
	</div>

	<br>
	<label for="formData">Form data:</label><input id="formData" readonly>

</body>
</html>
